<template>
  <div class="add-btn">
    <el-dialog
      title="选择维护人"
      :visible.sync="dialogVisible"
      width="1000px"
      :append-to-body="true"
      @close="closeDialog"
      :close-on-click-modal="false"
    >
      <div>
        <div class="header" style="margin-bottom: 10px">
          <div class="header_left"></div>
          <div class="header_right">
            <el-input
              placeholder="请输入用户名"
              v-model="search_val"
              style="width: 300px; margin-right: 15px"
              size="small"
              maxlength="20"
              clearable
              @clear="clearInput"
              class="el_input"
            >
              <el-button
                slot="append"
                :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
                @click="searchClick"
              >
              </el-button>
            </el-input>
          </div>
        </div>
        <div class="content">
          <el-table
            :data="userList"
            class="table"
            :header-cell-style="headerStyle"
            ref="refTable"
            row-key="userId"
            @selection-change="batchSelect"
            height="280px"
          >
            <el-table-column
              align="center"
              type="selection"
              :reserve-selection="true"
              width="60"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="username"
              label="用户名"
              min-width="100"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="nickname"
              label="昵称"
              min-width="100"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              prop="mobile"
              label="手机号码"
              min-width="100"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="page"
            :limit.sync="limit"
            :pageSizes="[10, 20, 30, 50]"
            @pagination="getDataList"
            class="pagination"
          />
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog" class="cancel-button"
          >取 消</el-button
        >
        <el-button
          size="small"
          @click="submit"
          v-preventReClick="1000"
          class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { mapState } from "vuex";
import { reqOrgUserPage } from "@api/api.js";
export default {
  props: ["orgId", "unitId", "userData"],
  mixins: [tableStyleMixin],
  components: { Pagination },
  data() {
    return {
      dialogVisible: false,
      loadingSearch: false,
      activeName: "shebei",
      search_val: "",
      userList: [],
      limit: 10,
      page: 1,
      total: 0,
      choseDataUsers: [],
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {
    async dialogVisible(val) {
      if (val) {
        this.batchDataList = [];
        this.choseDataUsers = this.userData;
        this.page = 1;
        this.limit = 10;
        await this.getDataList();
        // 第一次需要赋值翻页的数据
        this.$nextTick(() => {
          console.log(this.userData, "this.userData");
          this.userData.forEach((item, index) => {
            let exists = this.userList.find(
              (item2) => item2.userId === item.userId
            );
            if (!exists) {
              this.$refs.refTable.toggleRowSelection(item, true);
            }
          });
        });
      }
    },
  },
  methods: {
    // 获取列表
    async getDataList() {
      const res = await reqOrgUserPage(this.page, this.limit, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        tenantId: this.user.tenantId,
        orgId: this.unitId,
        screenRoleName: "INSTERALL_USER",
        username: this.search_val,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.total = res.data.total;
      this.userList = res.data.rows;
      this.$nextTick(() => {
        this.dataReplace();
      });
    },

    // 数据替换
    dataReplace() {
      this.choseDataUsers.forEach((item) => {
        this.userList.forEach((dataItem) => {
          if (dataItem.userId === item.userId) {
            this.$refs.refTable.toggleRowSelection(item, false);
            this.$refs.refTable.toggleRowSelection(dataItem, true);
          }
        });
      });
    },

    // 搜索
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      if (this.activeName == "shebei") {
        await this.getDataList();
      } else {
        await this.getDataListTannceqi();
      }
      this.loadingSearch = false;
    },
    // 点击复选框触发，可跨分页选择
    batchSelect(arr) {
      this.batchDataList = arr;
    },
    // 清空
    clearInput() {
      this.page = 1;
      this.limit = 10;
      this.getDataList();
    },

    closeDialog() {
      this.$refs.refTable.clearSelection();
      this.dialogVisible = false;
    },
    submit() {
      this.$emit("getUsers", this.batchDataList);
      this.closeDialog();
    },
  },
};
</script>
<style lang="less" scoped>
@import url("~@views/style/tablePage.less");
// @import url("../../common.less");
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #7367f0;
}

::v-deep .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 1px solid #7367f0;
}

/* 修改鼠标移入时的样式 */
::v-deep .el-tabs__item:hover {
  color: #7367f0 !important;
}

::v-deep .el-tabs--border-card {
  border: none !important;
  box-shadow: none !important;
}

::v-deep .el-checkbox__inner {
  background-color: transparent !important;
  border: 1px solid @primaryBorder !important;
}

// 多选框
.el-checkbox {
  color: @primaryThemeTxtColor2 !important;
}

// 单选框
.el-radio__inner {
  background: none !important;
}

::v-deep .el-radio__input.is-disabled .el-radio__inner {
  background: #e1e2e6 !important;
}
</style>
